<template>
  <Popup v-model:show="showModal" :title="props.title" @submit="onSubmit">
    <view class="car-list">
      <view class="car-itm" v-if="carList.length">
        <view :class="`car-con ${currentItem === car && 'dark'}`" @click="currentItem = car" v-for="(car, ind) in carList"
          :key="ind">
          {{ car }} </view>
      </view>
      <view v-else>暂无数据</view>
    </view>
  </Popup>
</template>
<script setup>
import { ref, watch } from "vue";
import Popup from "@/components/ui/popup"
import service from "@/path/service"
import { useShowModal } from "@/path/hooks/v-model"
const carList = ref([])
const props = defineProps({
  show: Boolean,
  title: String,
  // 当前选中项
  current: String,
})
const emit = defineEmits(['update:show', 'update:current'])
const currentItem = ref()
service.get("api/ycg/car/kmselectlist").then((res) => {
  carList.value = res
})

watch(() => props.current, v => {
  currentItem.value = v
}, { immediate: true, deep: true });

function onSubmit() {
  emit("update:current", currentItem.value);
}
const { showModal } = useShowModal(props, emit)
</script>
<style scoped lang="less">
.car-list {
  padding: 0rpx 32rpx;
}

.car-itm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .car-con {
    width: 296rpx;
    height: 80rpx;
    background: #F7F7F7;
    border-radius: 32px;
    color: #999999;
    text-align: center;
    line-height: 80rpx;
    box-sizing: border-box;
    margin-bottom: 48rpx;
  }

  .dark {
    background-color: #9CDB14;
    color: #fff;
  }
}
</style>